<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>注册
            <small>new</small>
        </h1>
    </div>
    <form action="?a=register" method="post" class="form-horizontal">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input type="email" id="email" name="email" required class="form-control" placeholder="email"
                           aria-describedby="email">
                    <span id="code" class="input-group-addon btn btn-default btn-lg ">
                        发送验证码
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" name="password" required class="form-control" id="password" placeholder="密码">
            </div>
        </div>

        <div class="form-group">
            <label for="emailCode" class="col-sm-2 control-label">邮箱验证码</label>
            <div class="col-sm-10">
                <input type="text" name="emailCode" required class="form-control" id="emailCode" placeholder="邮箱验证码">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">确认</button>
            </div>
        </div>
    </form>

    <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.min.js"></script>
    <script>
        $(function () {
            var code = $('#code');
            var email = $('#email');
            var sendLock = true;
            var waitTime = 5;
            var waitTime2 = waitTime;
            var timeers;

            //点击发送
            code.click(function () {
                checkEmailReg = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
                if (!checkEmailReg.test(email.val())) {
                    alert('邮箱格式错误');
                    return false;
                }
                if (sendLock) {
                    $(this).addClass('disabled');
                    code.text('发送中');
                    ajaxSend();
                } else {
                    alert('请勿频繁发送');
                }
            });

            //ajax发送
            function ajaxSend() {

                $.ajax({
                    url: "?a=sendCode",
                    type: "post",
                    dataType: "json",
                    data: {'email': email.val()},
                    success: function (data) {
                        if (data.status) {
                            timeers = setInterval(timeer, 1000);
                            sendLock = false;
                        } else {
                            code.removeClass('disabled');
                            code.text('重新发送验证码');
                        }
                        //发送回应消息
                        alert(data.msg);
                    }
                });
            }


            //倒计时
            function timeer() {
                code.text('还剩' + waitTime-- + '秒');
                if (waitTime < 0) {
                    code.removeClass('disabled');
                    code.text('重新发送验证码');
                    waitTime = waitTime2;
                    clearInterval(timeers);
                    sendLock = true;
                }
            }
        });
    </script>

</div>
</body>
</html>